<template>
  <div class="custom-video" v-bind="attrs">
    <div
      class="custom-video-container"
      ref="videoRef"
      @mouseover="handleControls($event, 'start')"
      @mouseleave="handleControls($event, 'end')"
    >
      <template v-if="videoState.play">
        <div
          class="u-f u-f-ac u-f-ajc"
          @click="pause('btn')"
          style="position: absolute; height: 100%; width: 100%; z-index: 99"
        >
          <template v-if="videoState.isLoading">
            <Loading
              style="height: 50px; width: 100%"
              :themeColor="videoConfig.themeColor"
              :isLoading="loading"
            />
          </template>
        </div>
      </template>
      <template v-else>
        <div
          class="u-f u-f-ac u-f-ajc"
          @click="play('btn')"
          style="position: absolute; height: 100%; width: 100%; z-index: 99"
        >
          <SvgIcon
            v-if="!videoState.play"
            :style="
              'color:' + videoConfig.themeColor + ';height:70px;width: 70px;'
            "
            :size="70"
            @click="play('btn')"
            :iconClass="'bofang'"
          />
        </div>
      </template>
      <video
        class="custom-video-video"
        ref="videoDomRef"
        :poster="videoConfig.poster"
      >
        <source :src="videoConfig.src" type="video/mp4" />
        <p>设备不支持</p>
      </video>
      <!-- 控制区域背景 -->
      <transition name="slide-fade">
        <div
          class="custom-video-control"
          v-show="!videoState.hideControl || videoState.play"
        >
          <!-- 进度条 -->
          <div
            class="custom-video-control-bg"
            @mousedown="handleProgressDown"
            @mousemove="handleProgressMove"
            @mouseup="handleProgressUp"
          >
            <div class="custom-video-control-bg-outside" ref="videoProOutRef">
              <span
                class="custom-video-control-bg-inside-cache"
                ref="videoCacheRef"
              ></span>
              <span
                class="custom-video-control-bg-inside"
                ref="videoProRef"
              ></span>
              <span
                class="custom-video-control-bg-inside-point"
                ref="videoPoiRef"
              ></span>
            </div>
          </div>
          <!-- 其他-->
          <div class="u-f u-f-ajs custom-video-control-all">
            <div style="display: flex; width: 100%">
              <!-- 播放控制器-->
              <div class="custom-video-control-control u-f u-f-ac u-f-ajc">
                <SvgIcon
                  v-if="videoState.play"
                  :size="24"
                  class="custom-video-control-control-play custom-video-control-control-pause"
                  @click="pause('btn')"
                  :style="'color:' + videoConfig.themeColor"
                  :iconClass="'zanting'"
                />
                <SvgIcon
                  v-else
                  :size="24"
                  class="custom-video-control-control-play"
                  @click="play('btn')"
                  :style="'color:' + videoConfig.themeColor"
                  :iconClass="'bofang'"
                />
              </div>
              <!-- 声音 -->

              <div
                class="custom-video-control-voice u-f u-f-ac u-f-ajc margin-right-5"
                @mousemove="handleVolProgressMove"
              >
                <SvgIcon
                  :size="20"
                  @click="handleClickVoice"
                  @mouseleave="
                    handleMouseLeaveControlVoice(
                      'custom-video-control-voice-bg'
                    )
                  "
                  @mousemove="
                    handleMouseEnterControlVoice(
                      'custom-video-control-voice-bg'
                    )
                  "
                  :style="'color:' + videoConfig.themeColor"
                  class="custom-video-control-voice-play"
                  :iconClass="'laba'"
                />
                <div
                  class="custom-video-control-voice-bg display-hide-style"
                  ref="custom-video-control-voice-bg"
                  @mouseleave="
                    handleMouseLeaveControlVoice(
                      'custom-video-control-voice-bg'
                    )
                  "
                  @mousemove="
                    handleMouseEnterControlVoice(
                      'custom-video-control-voice-bg'
                    )
                  "
                >
                  <div class="custom-video-control-voice-bg-number">
                    {{ videoConfig.volume }}
                  </div>
                  <div
                    class="custom-video-control-voice-bg-outside"
                    ref="voiceProOutRef"
                    @mousedown="handleVolProgressDown"
                    @mouseup="handleVolProgressUp"
                  >
                    <span
                      class="custom-video-control-voice-bg-inside"
                      ref="voiceProRef"
                    ></span>
                    <span
                      class="custom-video-control-voice-bg-point"
                      ref="voicePoiRef"
                    ></span>
                  </div>
                </div>
                <div
                  @click="handleClickVoice"
                  style="
                    position: absolute;
                    height: 35px;
                    width: 18px;
                    bottom: 0px;
                    left: 0px;
                  "
                ></div>
              </div>

              <!-- 时间 -->
              <div
                class="custom-video-control-time u-f u-f-ac u-f-ajc margin-right-5"
              >
                <span style="user-select: none">{{
                  currentTime ? currentTime : "00:00"
                }}</span>
                /
                <span style="user-select: none">{{
                  duration ? duration : "00:00"
                }}</span>
              </div>
            </div>
            <!-- 全屏缩放 -->
            <div class="custom-video-control-full u-f">
              <div class="margin-right-10 u-f u-f-ac u-f-ajc">
                <SvgIcon
                  :size="18"
                  @mouseleave="handleMouseLeaveControlVoice('halfScreen-style')"
                  @mousemove="handleMouseEnterControlVoice('halfScreen-style')"
                  :style="'color:' + videoConfig.themeColor"
                  class="custom-video-control-full-icon"
                  @click="handleHalfScreen"
                  :iconClass="
                    videoState.isHalfScreen
                      ? 'suoxiaotuichuquanpingshouhui'
                      : 'quanping1'
                  "
                />
                <div class="halfScreen-style display-hide-style">宽屏模式</div>
                <div
                  @click="handleClickVoice"
                  style="
                    z-index: -1;
                    position: absolute;
                    height: 35px;
                    width: 18px;
                    bottom: 0px;
                    left: 0px;
                  "
                ></div>
              </div>
              <div class="u-f u-f-ac u-f-ajc">
                <SvgIcon
                  :size="18"
                  @mouseleave="handleMouseLeaveControlVoice('fullScreen-style')"
                  @mousemove="handleMouseEnterControlVoice('fullScreen-style')"
                  :style="'color:' + videoConfig.themeColor"
                  class="custom-video-control-full-icon"
                  @click="handleScreen"
                  :iconClass="
                    videoState.isFullScreen ? 'tuichuquanping' : 'quanping2'
                  "
                />
                <div class="fullScreen-style display-hide-style">全屏模式</div>
                <div
                  @click="handleClickVoice"
                  style="
                    z-index: -1;
                    position: absolute;
                    height: 35px;
                    width: 100%;
                    bottom: 0px;
                    left: 0px;
                  "
                ></div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, useAttrs } from "vue";
import { useFunc } from "./hooks/useFunc";
import SvgIcon from "./cpns/svgIcon";
import Loading from "./cpns/loading";

interface propsInterface {
  src: string;
  poster: string;
  volume?: number;
  themeColor?: string;
  activeColor?: string;
  width?: string;
  height?: string;
}
let props = withDefaults(defineProps<propsInterface>(), {
  src: "",
  poster: "",
  volume: 20,
  themeColor: "",
  activeColor: "",
  width: "",
  height: "",
});
const attrs = useAttrs();
let loading = ref(true);
let {
  videoConfig,
  videoState,
  videoRef,
  videoDomRef,
  videoProOutRef,
  videoCacheRef,
  videoProRef,
  videoPoiRef,
  duration,
  currentTime,
  voiceProOutRef,
  voiceProRef,
  voicePoiRef,
  handleHalfScreen,
  handleMouseEnterControlVoice,
  handleMouseLeaveControlVoice,
  handleProgressDown,
  play,
  pause,
  handleProgressMove,
  handleProgressUp,
  handleVolProgressDown,
  handleVolProgressMove,
  handleClickVoice,
  handleVolProgressUp,
  handleControls,
  handleScreen,
} = useFunc(props);
</script>

<style scoped lang="less">
/* 总容器 */
.custom-video {
  &-container {
    cursor: pointer;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  /* 视频标签 */
  &-video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  /* 控制栏 */
  &-control {
    position: absolute;
    width: 100%;
    height: 50px;
    left: 0;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    z-index: 999;
    margin-top: 20px;
    /* 暂停 或者 播放 */
    &-control-pause {
      display: none;
    }
    &-control-play {
      width: 24px !important;
      height: 24px !important;
    }
    /**声音 时间 全屏控件**/
    &-voice,
    &-time,
    &-full {
      width: auto;
      color: #fff;
      position: relative;
    }
    &-time {
      font-size: 12px;
    }
    &-full {
      cursor: pointer;
      font-size: 14px;
      width: 50px;
      &-icon {
        width: 18px !important;
        height: 18px !important;
        font-size: 14px;
      }
    }
    &-voice {
      cursor: pointer;
      font-size: 14px;
      width: 30px;
      height: 30px;
    }
  }
  /* 控制栏进度条 */
  &-control-bg {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    /* 控制栏进度条 —— 总长度 */
    &-outside {
      width: 100%;
      height: 5px;
      background-color: hsla(0, 0%, 100%, 0.2);
      position: relative;
      cursor: pointer;
    }
    /* 控制栏进度条 —— 播放长度 */
    &-inside {
      z-index: 3;
      position: absolute;
      display: inline-block;
      width: 0;
      height: 100%;
      border-radius: 2.5px;
      left: 0;
      top: 0;
      background-color: #fff;
      transition: all 0.2s;
    }
    /* 控制栏进度条 —— 播放点 */
    &-inside-point {
      z-index: 3;
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: -2.5px;
      left: -1%;
      transition: all 0.2s;
    }
    &-inside-cache {
      z-index: 2;
      position: absolute;
      display: inline-block;
      width: 0;
      height: 100%;
      border-radius: 2.5px;
      left: 0;
      top: 0;
      background-color: #abadb2;
      transition: all 0.2s;
    }
  }

  /* 控制栏 —— 播放暂停控件 声音、时间、全屏缩放 */
  &-control-all {
    padding: 8px 10px;
  }
  &-control-control {
    color: white;
    width: 35px;
  }
}

//声音样式
.custom-video-control-voice {
  //&:hover > &-bg{
  //  display: block;
  //}
  &-play {
    z-index: 10;
    width: 20px !important;
    height: 20px !important;
  }
  &-bg {
    position: absolute;
    width: 30px;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.55);
    left: 0;
    bottom: 45px;
    &-number {
      font-size: 12px;
      width: 100%;
      user-select: none;
    }
    &-outside {
      width: 5px;
      height: 70px;
      border-radius: 2.5px;
      background-color: #aaa;
      position: absolute;
      left: 50%;
      bottom: 15px;
      transform: translate3d(-50%, 10%, 0);
      cursor: pointer;
    }
    &-inside {
      display: inline-block;
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      border-radius: 2.5px;
      background-color: #fff;
      height: 0;
    }
    &-point {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      left: -2.5px;
      bottom: -1px;
    }
  }
}

//
.halfScreen-style {
  font-size: 12px;
  position: absolute;
  width: auto;
  height: 100%;
  padding: 0px 5px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.55);
  left: -15px;
  bottom: 45px;
}
//
.fullScreen-style {
  font-size: 12px;
  position: absolute;
  width: auto;
  height: 100%;
  padding: 0px 5px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.55);
  left: -8px;
  bottom: 45px;
}

/* 控制栏隐藏动画 */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

/**控件过度动画**/
.control-fade-enter-active {
  transition: all 0.3s ease-out;
}

.control-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.control-fade-enter-from,
.control-fade-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
.show {
  opacity: 1 !important;
}
.hide {
  opacity: 0 !important;
}
.display-hide-style {
  display: none;
}
.display-show-style {
  display: block;
}
</style>
